<template>
	<div>
		<el-space wrap>
			<div class="search-info-box">
				<el-text class="search-info" size="small" type="info">分销商名称</el-text>
				<el-input size="small" style="width: 200px" v-model.trim="state.queryParams.goodsName" clearable maxlength="100" />
			</div>
			<div class="search-info-box">
				<el-text class="search-info" size="small" type="info">分销商账号</el-text>
				<el-input size="small" style="width: 200px" v-model.trim="state.queryParams.goodsName" clearable maxlength="100" />
			</div>
			<div class="search-info-box">
				<el-text class="search-info" size="small" type="info">是否启用</el-text>
				<el-select size="small" style="width: 200px" v-model.trim="state.queryParams.goodsName" clearable maxlength="100">
					<el-option label="是" :value="true"></el-option>
					<el-option label="否" :value="false"></el-option>
				</el-select>
			</div>
		</el-space>

		<div class="table">
			<el-table :data="state.dataList" border v-loading="state.loading" height="70vh" @sort-change="sortChange">
				<el-table-column fixed="left" type="index" label="序号" width="60" />
				<el-table-column prop="goodsName" label="分销商名称" width="" />
				<el-table-column prop="skuCode" label="分销商账号" show-overflow-tooltip width="" />
				<el-table-column prop="erpStyleCode" label="结算周期" show-overflow-tooltip width="" />
				<el-table-column prop="goodsTag" label="累积分销业绩（第一阶梯）" min-width="" />
				<el-table-column prop="costPrice" label="提成点" sortable="custom" show-overflow-tooltip width="" />
				<el-table-column prop="quantity" label="累积分销业绩（第二阶梯）" sortable="custom" show-overflow-tooltip width="" />
				<el-table-column prop="orderLock" label="提成点" min-width="" />
				<el-table-column prop="maxSafeQty" label="累积分销业绩（第三阶梯）" min-width="" />
				<el-table-column prop="weight" label="提成点" sortable="custom" show-overflow-tooltip width="" />

				<el-table-column prop="freightTemplateName" label="操作人" show-overflow-tooltip width="" />
				<el-table-column prop="isUseable" label="是否启用" min-width=""> </el-table-column>
				<el-table-column prop="unUseableMessage" label="操作" align="center" width="260">
					<template #default="{ row }">
						<div class="btn_list">
							<el-button text type="primary" @click="handleOper('edit')">编辑</el-button>
							<el-button text type="primary" @click="handleOper('del')">删除</el-button>
							<el-button text type="primary" @click="handleOper('log')">操作记录</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="page">
				<el-pagination
					size="small"
					v-model:current-page="state.queryParams.pageIndex"
					v-model:page-size="state.queryParams.pageSize"
					:page-sizes="[50, 100, 300]"
					background
					layout="total,sizes, prev, pager, next"
					:total="state.total"
					@size-change="onSearch"
					@current-change="getData"
				/>
			</div>
		</div>

		<setReward ref="setRewardRef" />
		<viewLog ref="viewLogRef" />
	</div>
</template>

<script setup>
import { reactive, defineOptions, ref } from 'vue'
import setReward from './setReward.vue'
import viewLog from './viewLog.vue'
defineOptions({
	name: 'reward'
})

const setRewardRef = ref()
const viewLogRef = ref()
const state = reactive({
	queryParams: {
		pageIndex: 1,
		pageSize: 50
	},
	total: 0,
	dataList: [{ a: '' }],
	loading: false
})

const handleOper = tp => {
	switch (tp) {
		case 'edit':
			setRewardRef.value.open()

			break

		case 'log':
		viewLogRef.value.open()
		break;
		// case 'del':

		// break;
	}
}
const sortChange = () => {}
const onSearch = () => {}
const getData = () => {}
</script>

<style scoped lang='scss'>
.btn_list {
	display: flex;
	align-items: center;
}
:deep(.search-info-box) {
	position: relative;
	.el-select {
		width: 260px !important;
	}
	.search-info {
		margin-right: 10px;
		position: absolute;
		left: 4px;
		top: 3px;
		z-index: 9;
	}
	.el-input__inner {
		padding-left: 50px !important;
	}
	.el-select__selected-item {
		padding-left: 50px !important;
	}
}
</style>